<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>客户增长分析</title>
<%@ include file="/page/include.jsp" %>
</head>
</style>
<body>
	<div class="pathinfo">
		<p>
			<a href="#">客户属性</a>
		</p>
	</div>
	<div class="col-md-6" style="padding-left: 0">
		<div class="box_2">
			<div class="box_2_con">
				<div class="hd">
					<div class="title">
						<i></i><span>性别分布</span>
					</div>
				</div>
				<div class="bd">
					<div id="genderAnalysis" style="width: 100%;height:250px;"></div>
				</div>
			</div>
		</div>
		<div class="box_2">
			<div class="box_2_con">
				<div class="hd">
					<div class="title">
						<i></i><span>城市分布</span>
					</div>
					<div class="search_dd">
						<ul>
							<li><select id="areaSelect1" class="page_selector"></select>
							</li>
						</ul>
					</div>
				</div>
				<div class="bd">
					<div id="cityAnalysis" style="width: 100%;height:250px;margin-top:20px;"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6" style="padding-right: 0">
		<div class="box_2" style="height: 720px">
			<div class="box_2_con">
				<div class="hd">
					<div class="title">
						<i></i><span>省份分布</span>
					</div>
					<div class="search_dd">
						<ul>
							<li>
								<select id="areaSelect2" class="page_selector">
								</select>
							</li>
						</ul>
					</div>
				</div>
				<div class="bd">
					<div class="row" style="height:60%;">
						<div id="provinceMapAnalysis" style="width: 100%;height:470px;margin-top:-30px;"></div>
					</div>
					<div class="row" style="height:40%;">
						<div id="provinceBarAnalysis" style="width: 100%;height:250px;margin-top:-50px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="${rootPath }/statics/js/jquery.select-1.3.6.js"></script>
	<script type="text/javascript" src="${rootPath }/statics/plugins/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="${rootPath }/statics/plugins/echarts/china.js"></script>
	
	<script>
		$(function(){
			$(".page_selector").sSelect();
			$('.dd_nav p a').click(function(){$(this).toggleClass('current');$(this).siblings().removeClass('current');});
			//区域列表
			$.ajax({
				type: 'post',
				url: rootPath + "/area/getAreaList",
				data: {rootDepth: '1'},
				dataType: 'json',
				success: function(result) {
					var data = result.data || result.rows || result.list || result; console.log(data)
					$('.page_selector').empty().append("<option value=''>全国</option>");
					$.each(data, function(){
						$('.page_selector').append("<option value='"+this.id+"'>"+this.areaName+"</option>");
					})
					$(".page_selector").find("option[value='']").attr("selected",true); 
					$(".page_selector").sSelect();
				}
			})
			$('#areaSelect1').on('change', function(){
				var provinceCode = $(this).val();
				getCustomerCItyDistributionData(provinceCode);
			})
			$('#areaSelect2').on('change', function(){
				var provinceCode = $(this).val();
				getProvinceDisdtibutionData(provinceCode);
			})
			//性别分布
			getCustomerGenderDistributionData();
			
			//城市分布
			getCustomerCItyDistributionData();
			
			//省份分布
			getProvinceDisdtibutionData();
			
		})
		
		/**
		 * 生成客户性别分布柱状图
		 */
		function getCustomerGenderDistributionData(){
			$.ajax({
				type:'post',
				url: rootPath + '/report/getCustomerGenderDistributionList',
				dataType: 'json',
				success: function(data) {
					initGenderDistributionChart(data);
				}
			})
		}
		function initGenderDistributionChart(data){
			var series = [];
			$.each(data, function(){
				series.push({
					name : this.gender,
					type : 'bar',
					stack : '人数',
					barWidth: 60, 
					label : {
						normal : {
							show : true,
							position : 'insideRight'
						}
					},
					itemStyle:{
						normal:{
							color: this.gender == '女' ? '#C23531' : '#5A94F4'
						}
					}, 
					data : [ this.num ]
				})
			})
			var option = {
				tooltip : {
					trigger : 'axis',
					axisPointer : { // 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend : {
					data : [ '男', '女' ]
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : {
					type : 'value'
				},
				yAxis : {
					type : 'category',
					data : [ '性别' ]
				},
				series : series
			};

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('genderAnalysis'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		
		/**
		 * 生成城市分布柱状图
		 */
		function getCustomerCItyDistributionData(provinceCode){
			$.ajax({
				type:'post',
				data: {provinceCode: provinceCode},
				url: rootPath + '/report/getCustomerCityDistributionList',
				dataType: 'json',
				success: function(data) {
					initCityDistributionChart(data);
				}
			})
		}
		function initCityDistributionChart(data){
			var xAxis_data = [];
			var series_data = [];
			$.each(data, function(){
				xAxis_data.push(this.areaName);
				series_data.push(this.num);
			})
			var option = {
				color: ['#C23531'],
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'shadow'
					}
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : {
					type : 'category',
					data : xAxis_data
				},
				yAxis : {
					type : 'value'
				},
				series : [ {
					name : '人数',
					type : 'bar',
					barWidth: '30%',
					data : series_data
				} ]
			};
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('cityAnalysis'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
		
		/**
		 * 生成省份分布地图和柱状图
		 */
		function getProvinceDisdtibutionData(provinceCode) {
			$.ajax({
				type:'post',
				url: rootPath + '/report/getCustomerProvinceDistributionList',
				data: {provinceCode: provinceCode},
				dataType: 'json',
				success: function(data) {
					initProvinceDisdtibutionChart(data);
				}
			})
		}
		function initProvinceDisdtibutionChart(data){
			var yAxis_data = [];
			var series_data = [];
			var map_data = [];
			$.each(data, function(){
				yAxis_data.push(this.areaName);
				series_data.push(this.num);
				map_data.push({
					name : this.areaName.replace('省', ''),
					selected : true
				})
			})
			var barOption = {
				color: ['#C23531'],
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'shadow'
					}
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : {
					type : 'value'
				},
				yAxis : {
					type : 'category',
					data : yAxis_data
				},
				series : [ {
					name : '人数',
					type : 'bar',
					barWidth: '60%',
					data : series_data
				} ]
			};
			// 基于准备好的dom，初始化echarts实例
			var barChart = echarts.init(document.getElementById('provinceBarAnalysis'));
			// 使用刚指定的配置项和数据显示图表。
			barChart.setOption(barOption);
			
			//*****************************************************
			var mapOption = {
				tooltip : {
					show: true, //不显示提示标签
					formatter : '{b}', //提示标签格式
					
				//提示标签字体颜色
				},
				series : [ {
					type : 'map',
					mapType : 'china',
					label : {
						normal : {
							show : true,//显示省份标签
							textStyle : {
								color : "#888"
							}
						//省份标签字体颜色
						},
						emphasis : {//对应的鼠标悬浮效果
							show : true,
							textStyle : {
								color : "#eee"
							}
						}
					},
					itemStyle : {
						normal : {
							borderWidth : .5,//区域边框宽度
							borderColor : '#dee',//区域边框颜色
							areaColor : "#AAD5FF",//区域颜色
						},
						emphasis : {
							borderWidth : .5,
							borderColor : '#ffff',
							areaColor : "#5A94F4",  //#C23531
						}
					},
					data : map_data
				} ],
			};
			// 基于准备好的dom，初始化echarts实例
			var mapChart = echarts.init(document.getElementById('provinceMapAnalysis'));
			// 使用刚指定的配置项和数据显示图表。
			mapChart.setOption(mapOption);
		}
	</script>
</body>
</html>